/**
 * Created by wuliupai on 2017/7/2.
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
} from 'react-native';

import Car from '../../../src/json/Car.json';

export default class SessionListViewUI extends Component {
    constructor(props) {
        super(props);

        let getSectionData = (dataBlob, sessionId) => {
            return dataBlob[sessionId];
        };

        let getRowData = (dataBlob, sessionId, rowId) => {
            return dataBlob[sessionId + ':' + rowId];
        };

        this.state = {
            dataSource: new ListView.DataSource({
                getSectionDate: getSectionData, // 获取组中的数据
                getRowData: getRowData, // 获取行中的数据
                rowHasChanged: (row1, row2) => row1 !== row2,
                sectionHeaderHasChanged: (section1, section2) => section1 !== section2,
            }),
        };

    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                renderSectionHeader={this.renderSection}
                stickySectionHeadersEnabled={true}
            />
        );
    }

    renderRow(rowData) {
        return (
            <TouchableOpacity>
                <View style={styles.listViewCellStyle}>
                    <Image source={{uri: rowData.icon}} style={styles.rowImgStyle}/>
                    <Text>{rowData.name}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    renderSection(sectionData, sectionID) {
        return (
            <View style={styles.sectionHeaderViewStyle}>
                <Text style={styles.sectionHeaderTextStyle}>{sectionData}</Text>
            </View>
        );
    }

    //耗时操作在该函数中处理
    componentDidMount() {

        this.loadDataFromJson();

    }

    loadDataFromJson() {
        let jsonData = Car.data;

        let dataBlob = {},
            sectionIDs = [],
            rowIDs = [],
            cars = [];

        for (let i = 0; i < jsonData.length; i++) {
            //1. 把组号放入到sectionID中
            sectionIDs.push(i);

            //2. 把组中的内容放到dataBlob中
            dataBlob[i] = jsonData[i].title;

            //3. 取出该组中所有的车
            cars = jsonData[i].cars;
            rowIDs[i] = [];

            //4. 遍历cars的数组
            for (let j = 0; j < cars.length; j++) {
                //把行号放入到rowIDs中
                rowIDs[i].push(j);
                //把每一行的数据放入到dataBlob中
                dataBlob[i + ':' + j] = cars[j];
            }
        }

        // 更新状态
        this.setState({
            dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
        });
    }
}

const styles = StyleSheet.create({
    pageViewStyle: {
        backgroundColor: '#fff',
    },

    listViewCellStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 0.5,
        borderBottomColor: '#e8e8e8',
        paddingHorizontal: 10,
        paddingVertical: 5,
    },

    sectionHeaderViewStyle: {
        height: 30,
        backgroundColor: 'gray',
        paddingHorizontal: 10,
        justifyContent: 'center',
    },

    sectionHeaderTextStyle: {
        color: '#fff',
        fontSize: 18,
    },

    rowImgStyle: {
        width: 70,
        height: 70,
        marginRight: 8,
    },
});